<template>
    <div class="footerContainer">
        <div class="customeRow">
            <el-row :gutter="25">
                <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                    <div class="footerHeader">更多内容</div>
                    <div class="footerBody">
                        <ul>
                            <li>
                                <div @click="handleRedirectBlog('','/contact-us')">联系我们
                                </div>
                            </li>
                            <li>
                                <div @click="handleRedirectBlog(11)">关于我们
                                </div>
                            </li>
                            <li>
                                <div @click="handleRedirectBlog(13)">常见问题
                                </div>
                            </li>
                            <li>
                                <div @click="handleRedirectBlog('','/cleaning-and-care')">清洁护理
                                </div>
                            </li>
                        </ul>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                    <div class="footerHeader">更多内容</div>
                    <div class="footerBody">
                        <ul>
                            <li>
                                <div @click="handleRedirectBlog(14)">定制服务
                                </div>
                            </li>
                            <li>
                                <div @click="handleRedirectBlog(35)">维修服务
                                </div>
                            </li>
                            <li>
                                <div @click="handleRedirectBlog('','/blogs')">博客
                                </div>
                            </li>
                            <li>
                                <div @click="handleRedirectBlog(18)">产品档案
                                </div>
                            </li>
                            <li>
                                <div @click="handleRedirectBlog('','/where-to-buy')">何处购买
                                </div>
                            </li>
                        </ul>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                    <div class="footerHeader">法律</div>
                    <div class="footerBody">
                        <ul>
                            <li>
                                <div @click="handleRedirectBlog(33)">网站使用条款
                                </div>
                            </li>
                            <li>
                                <div @click="handleRedirectBlog(32)">Cookie政策
                                </div>
                            </li>
                            <li>
                                <div @click="handleRedirectBlog(31)">隐私政策
                                </div>
                            </li>
                        </ul>
                    </div>
                </el-col>
            </el-row>

            <div class="footerBottom">
                <div class="separator"></div>
                <div class="footerBottomLogoList">
                    <el-popover
                            placement="top"
                            title=""
                            width="200"
                            trigger="hover"
                            v-model="visible">
                        <div class="qrcodeContainer">
                            <div>扫码关注微信公众号</div>
                            <img class="qrcode" src="../assets/3030qrcode_for_gh_1fab81866f33_860.jpg" alt="billingham">
                        </div>
                        <img class="wechat" slot="reference" @click="visible = !visible"
                             src="../assets/wechatbottom.png" alt="billingham"/>
                    </el-popover>
                    <a target="_blank" href="https://weibo.com/6975612372/manage">
                        <img style="margin-left: 16px;"
                             src="../assets/weibobottom.png"
                             alt="billingham"/>
                    </a>
                </div>
                <div class="copyrightInfo">
                    <div>版权所有©2020 M BILLINGHAM HOLDINGS LIMITED，公司编号11976966，知识产权归 M BILLINGHAM HOLDINGS LIMITED所有，
                    </div>
                    <div>包括商标BILLINGHAM®，由M BILLINGHAM & CO LIMITED授权使用，公司编号01714494和增值税编号:324875385。</div>
                    <div>M BILLINGHAM HOLDINGS LIMITED和M BILLINGHAM & CO LIMITED是在英国注册的公司，</div>
                    <div>其注册办公室位于CITY ESTATE, CORNGREAVES ROAD, CRADLEY HEATH, WEST MIDLANDS, B64 7EP, ENGLAND.</div>
                </div>
            </div>
            <div class="copyRight">
                <a href="https://www.regroup-media.co.uk/regroup-china/" target="_blank">Powered by Regroup China</a>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {Row, Col, Button, Input, Popover, Message} from 'element-ui';
    import serve from '../util/serve';

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Button);
    Vue.use(Input);
    Vue.use(Popover);
    export default {
        name: 'Footer',
        inject: ['reload'],
        data: () => {
            return {
                email: '',
                visible: false,
                visible1: false,
                loading: false
            }
        },
        mounted(){
        },
        updated(){
        },
        props: {
            msg: String
        },
        methods: {
            /**
             * 跳转到博客详情页
             * @param id
             */
            handleRedirectBlog: function (id,url='') {
                this.reload();
                if (id){
                    this.$router.push('/blogs/'+id);
                } else{
                    this.$router.push(url);
                }

            },
            /**
             * 处理提交表单事件
             */
            handleSubmit() {
                const {email} = this;
                const rex = /^([A-Za-z0-9_\-.\u4e00-\u9fa5])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,8})$/;
                if (!rex.test(email)) {
                    Message({
                        message: '请输入正确邮箱地址',
                        type: 'error'
                    });
                    return;
                }
                const _this = this;
                _this.loading = true;
                const submitData = {
                    name: 'test',
                    phone: email.split('@')[0],
                    email,
                    fid: 7
                };
                const url = serve.handleGetUrl('contact', {}, 'cloudflare');
                serve.doPost(url, submitData)
                    .then((response) => {
                        _this.loading = false;
                        const data = response.data;
                        if (data.code === 1) {
                            Message({
                                message: '提交成功',
                                type: 'success'
                            });
                            _this.email = ''
                        } else {
                            Message({
                                message: data.msg || '请求错误',
                                type: 'error'
                            });
                        }
                    }).catch(() => {
                    _this.loading = false;
                });
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .footerContainer {
        padding: 30px 15px;
        background: #444444 !important;
        color: #fff;
    }

    .footerHeader {
        font-size: 16px;
        border-bottom: 1px solid #fff;
        line-height: 40px;
    }

    .footerBody {
        margin-top: 25px;
    }

    .footerBody ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .footerBody ul li {
        margin-top: 8px;
        font-size: 14px;
        cursor: pointer;
    }

    .footerBody ul li a {
        text-decoration: none;
        color: #fff;
    }

    .input-with-select input {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        color: #000;
        outline: none;
    }

    .input-with-select .el-input-group__append {
        border: #000;
        background: #000;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        width: 50px;
        text-align: center;
    }

    .input-with-select .el-input-group__append button.el-button {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        color: #fff;
        background: #000;
        border: #000;
    }

    .separator {
        width: 800px;
        height: 1px;
        background: #fff;
        margin: 50px auto;
        margin-bottom: 30px;
    }

    .footerBottomLogoList {
        text-align: center;
    }

    .footerBottomLogoList img {
        width: 28px;
        height: 28px;
        margin: 0 10px;
    }

    .wechat {
        width: 30px;
        height: 30px;
        margin: 0 10px;
        cursor: pointer;
    }

    .copyrightInfo {
        text-align: center;
        font-size: 13px;
        margin-top: 30px;
        line-height: 24px;
    }


    .input-with-select input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color: #000;
    }

    .input-with-select input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #000;
    }

    .input-with-select input::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #000;
    }

    .input-with-select input:-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #000;
    }

    .input-with-select input::-ms-input-placeholder { /* Microsoft Edge */
        color: #000;
    }

    .copyRight {
        text-align: center;
        margin-top: 20px;
    }

    .copyRight a{
        color: #fff;
        text-decoration: none;
    }

    @media screen and (max-width: 420px) {
        .footerBody {
            margin-top: 15px;
            margin-bottom: 20px;
            background: #444444 !important;
        }
    }

    @media screen and (max-width: 850px) {
        .separator {
            width: 100%;
        }
    }
</style>
